<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style-type:none;
        }
        .box {
            width:600px;
            height:450px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        .box ul {
            position: absolute;
            width:4000px;
        }
        .box ul li{
            float: left;
        }
        .box ul li a img {
            width:600px;
            /* height:200px; */
        }
        .box .botton {
            position: absolute;
            width:100%;
            bottom: 5px;
            text-align: right;
        }
        .box .botton span{
            display: inline-block;
            width:20px;
            height:20px;
            color:white;
            background: black;
            line-height: 20px;
            border-radius:50%;
            cursor: pointer;
            text-align: center;
            margin:2px;
            opacity: .4;
        }
        .box .botton span.cur{
            opacity: 1;
        }
    </style>
</head>
<body>

    <div class="box">
        <ul>
            <li><a href=""><img src="images/01.jpg" alt=""></a></li>
            <li><a href=""><img src="images/02.jpg" alt=""></a></li>
            <li><a href=""><img src="images/03.jpg" alt=""></a></li>
            <li><a href=""><img src="images/04.jpg" alt=""></a></li>
            <li><a href=""><img src="images/05.jpg" alt=""></a></li>
        </ul>
        <div class="botton"></div>
    </div>
    <script>
        var ul = document.querySelector('.box ul');
        var botton = document.querySelector('.box .botton');
        var lis = document.querySelectorAll('.box ul li');
        
        // 1.1 创建span标签
        lis.forEach(function(v,k){
            var span = document.createElement('span');
            var spanv = document.createTextNode(k+1);
            span.appendChild(spanv)
            botton.appendChild(span)
        })
        
        // 3. 解决span标签的点击事件。
        var spans = document.querySelectorAll('.box .botton span');
        
        spans.forEach(function(v,k){
            v.onclick = function() {
                // 先清空所有的样式
                for(var i = 0; i < spans.length; i++) {
                    spans[i].className = ''
                }
                // 再给当前添加样式
                spans[k].className = 'cur';
                // 将点击到的元素的下标赋值给当前，作为当前的图片的下标。
                index = k;
            }            
        })

        setInterval(run,1000)
        
        var index = 0;
        var wt = 600;
        // 1. 先解决ul滚动问题。
        function run() {
            var lislen = lis.length;
            if(index == lis.length ) {
                index = 0;
            }
            ul.style.left = - index * 600 + 'px';
            
            // 2. span标签的跟随问题。
            // 先清空所有的样式
            for(var i = 0; i < spans.length; i++) {
                spans[i].className = ''
            }
            // 再给当前添加样式
            spans[index].className = 'cur';
            index++;
            return false;
        }
        


    </script>
</body>
</html>